<template>
  <div class="nav-panel">
    <template v-if="data">
      <div class="nav-list no-scrollbar" id="navPanel">
        <div
          class="nav-item"
          @click.stop="onClickNavItem(item, index)"
          :class="activeId == item.value ? 'active' : ''"
          v-for="(item, index) in data"
          :key="item"
        >
          {{ lang ? $t(item.label) : item.label }}
        </div>
      </div>
    </template>

    <template v-else>
      <div class="pc-skeleton">
        <div class="nav-list" style="overflow: hidden">
          <div class="nav-item" v-for="i in 5" :key="i">
            <Skeleton width="100px" pc></Skeleton>
          </div>
        </div>
      </div>
      <div class="mobile-skeleton">
        <div class="nav-list" style="overflow: hidden">
          <div class="nav-item" v-for="i in 5" :key="i">
            <Skeleton width="400px" mobile></Skeleton>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import { computed, getCurrentInstance } from "vue";

type Props = {
  data: any[];
  activeId: string;
  goto?: boolean;
  activeColor?: string;
  lang?: boolean;
};
const $t = getCurrentInstance()?.appContext.config.globalProperties.$t
const props = withDefaults(defineProps<Props>(), {});
const emits = defineEmits(["item-click"]);

const activeColor = computed(() => {
  return props.activeColor || "#323232";
});

const onClickNavItem = (item: any, index: number) => {
  emits("item-click", item, index);
};
</script>
<style scoped lang="less">
.nav-panel {
  display: flex;
  justify-content: center;
  font-size: 16px;
  color: #323232;
  border-bottom: 1px solid #d9e1e7;
  .nav-list {
    display: flex;
    gap: 16px;
    .nav-item {
      padding: 21px 16px;
      position: relative;
      cursor: pointer;
      &.active {
        font-weight: 600;
        color: v-bind(activeColor);
        &::after {
          content: "";
          position: absolute;
          bottom: 0;
          width: 100%;
          height: 4px;
          background-color: v-bind(activeColor);
          left: 50%;
          transform: translateX(-50%);
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .nav-panel {
    position: sticky;
    top: var(--yd-header-height);
    font-size: 72px;
    height: 225px;
    margin-left: -82px;
    margin-right: -82px;
    background-color: #f6f8fa;
    z-index: 99;
    &::-webkit-scrollbar {
      width: 0;
    }
    .nav-list {
      flex-wrap: nowrap;
      overflow-x: scroll;
      .nav-item {
        margin-right: 123px;
        &:first-child {
          margin-left: 123px;
        }
        &:last-child {
          margin-right: 123px;
        }
        padding: 61px 41px;
        white-space: nowrap;
        &.active {
          &::after {
            width: 100%;
            height: 20px;
          }
        }
      }
    }
  }
}
</style>
